<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ball</title>
    <style>
        #print {
            width: 500px;
            height: 300px;
            position: relative;
            border: 1px solid #999;
        }

        #print div {
            position: absolute;
            transform: translate3d(-50%, -50%, 0);
        }

        #print .ball {
            display: inline-block;
            width: 100%;
            height: 100%;
            margin: 0;
            border-radius: 50%;
            position: relative;
            /*background: radial-gradient(circle at 50% 120%, #323232, #0a0a0a 80%, #000000 100%);*/
        }

        #print .ball:before {
            content: "";
            position: absolute;
            background: radial-gradient(circle at 50% 120%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 70%);
            border-radius: 50%;
            bottom: 2.5%;
            left: 5%;
            opacity: 0.6;
            height: 100%;
            width: 90%;
            -webkit-filter: blur(5px);
            z-index: 2;
        }

        #print .ball:after {
            width: 100%;
            height: 100%;
            content: "";
            position: absolute;
            top: 5%;
            left: 10%;
            border-radius: 50%;
            background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8) 14%, rgba(255, 255, 255, 0) 24%);
            transform: translateX(-28%) translateY(-28%) skewX(-20deg);
            -webkit-filter: blur(10px);
        }

    </style>
</head>
<body>

<div id="print">
</div>
</body>
<script src="index.js"></script>
</html>